<script setup lang="ts">
import { useStore } from '@store/index';
import { useRouter } from 'vue-router';
const store = useStore()
const router = useRouter()
// 获取 BASEURL
const BASEURL = store.getBaseUrl()
const toCDPage = () => {
    router.push({
        name: 'musicList',
        params: {
            musicListId: props.cdId,
            disableSlide: 0
        }
    })
}
const props = defineProps<{
    src: string,
    width: number,
    height: number,
    title: string,
    cdId: string
}>()

</script>

<template>
    <div class="album-warp">
        <!--  -->
        <img @click="toCDPage" :style="{ cursor: 'pointer', width: props.width + 'px', height: props.height + 'px' }"
            class="image" :src="BASEURL + '/static/image/' + props.src">
        <img class="album-ornament" src="../../assets/image/album-ornament.png" :style="{ height: props.height + 'px' }">
        <div class="title">
            <a>{{ props.title }}</a>
        </div>
    </div>
</template>

<style scoped lang="css">
.title {
    cursor: pointer;
    height: 30px;
    width: 133.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
}
.title a:hover {
    text-decoration: underline;
}

</style>